<template>
  <div class="area-options">
    <el-cascader
      ref="cascader" size="mini"
      placeholder="请选择行政区划"
      v-model="cascaderValue"
      pId="pId"
      :options="areaListOptions"
      @change="handleChange"
      @expand-change="handleExpandChange"
      :props="{ checkStrictly: true }"
      filterable />
  </div>
</template>

<script>
  import { listAllArea } from "@/api/module/area";
  export default {
    name: "index",
    props: {
      value:{
        type: Array,
      },
      pId:null,
      isHasDis:{
        type: Number,
        default: 1,
      },
    },

    data() {
      return {
        cascaderValue:this.value,
        areaListOptions: null,
        provinceId:null,
        cityId:null,
        districtId:null,
        queryParam:{
          provinceId: null,
          isHasDis: this.isHasDis,
        }
      }
    },
    created() {
      console.log('create A');
      this.cascaderValue = this.value;
      this.getAllAera(this.pId);
      console.log('this.value',this.value)
    },
    mounted() {
      console.log('cmounted A');
    },
    methods: {
      getAllAera(pId){
        if(pId!==null && pId!==undefined){
          this.queryParam.provinceId = pId;
        }
        listAllArea(this.queryParam).then(response => {
          console.log('getAllArea response.data',response.data);
          this.areaListOptions = response.data;
        });
      },
      handleChange(e){
        console.log(' Area onChang e',e);
        this.$emit('change',e);
      },
      handleExpandChange(e){
        this.$emit('expand-change',e);
      },
      /**
       * public methods
       */
      getCheckedNodes(leafOnly){
        return this.$refs.cascader.getCheckedNodes(leafOnly);
      }
    }
  }
</script>

<style scoped>
  .area-options .el-cascader{
    width:96%;
  }
</style>
